<template>
  <div>
    <div class="head">
      <div class="head_left" @click="bafanck()">
        <img src="@/assets/back.png" class="back_img" alt>
      </div>
      <div class="head_in">
        <span class="head_title">手机绑定</span>
      </div>
      <div class="head_left">
        <span class="head_zhuc"></span>
      </div>
    </div>
    <div style="height:93px;"></div>
    <div class="ver_content" style="margin-top:.2rem;">
      <span>手机号</span>
      <input maxlength="11" v-model="param.username" display placeholder="请输入手机号">
    </div>
     <div class="ver_content" style="margin-top:.2rem;">
      <span>验证码</span>
      <input type="number" v-model="param.codes" v-on:input="codemode" maxlength="6" placeholder="请输入验证码">
      <span v-if="iscodediv2" class="obtain2" @click="Sendout">获取验证码</span>
       <span v-if="iscodemiao" class="obtain">{{count}}s后重发</span>
    </div>
    <div style="margin-top: 1rem;">
        <mt-button v-if="isbutt" type="primary" class="bott_log" size="large">下一步</mt-button>
        <mt-button v-else type="primary" class="bott_log2" size="large" @click="onNextstep">下一步</mt-button>
      </div>
   </div>
</template>

<script>
export default {
  data() {
    return {
      param: {
        username: "150****1526",
        card_no: "",
        codes: ""
      },
      iscodediv2: true,
      iscodemiao: false,
      count: "",
      timer: null,
      isbutt:true,
      username:""
    };
  },
  methods: {
    bafanck() {
      this.$router.go(-1); //返回上一层
    },
    regs(){
      this.$router.push({path:'regs'})
    },
    Sendout() {
      //发送短信
      var that = this;
      that.$toast("短信已成功发出，请注意查收！");
      that.iscodediv2 = false;
      that.iscodemiao = true;
      const TIME_COUNT = 60;
      if (!this.timer) {
        this.count = TIME_COUNT;
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= TIME_COUNT) {
            this.count--;
          } else {
            clearInterval(this.timer);
            this.timer = null;
            that.iscodemiao = false;
            that.iscodediv2 = true;
          }
        }, 1000);
      }
    },
    codemode() {
      var that = this;
      if (that.param.codes.length==6) {
          that.isbutt=false
      }else{
         that.isbutt=true
      }
    },
    onNextstep(){
      // this.$router.push({path:'bindphone'})
    }
  }
};
</script>
<style scoped>
.head {
  width: 750px;
  height: 100px;
  background-color: #ffffff;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.head_left {
  width: 120px;
  height: 100px;
  display: flex;
  justify-content: flex-start;
  padding-left: 30px;
  box-sizing: border-box;
  align-items: center;
}
.head_zhuc {
  font-size: 26px;
}
.back_img {
  width: 35px;
  height: 35px;
}
.head_in {
  width: 510px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.head_title {
  font-size: 34px;
  color: #333333;
  margin-left: 30px;
}
.shouji_number {
  width: 670px;
  height: 140px;
  border-bottom: #e2e2e2 solid 1px;
  margin-left: 40px;
  background-color: cornflowerblue;
}
.numsp {
  margin-top: 60px;
  font-size: 30px;
  margin-left: 20px;
}
.ver_content {
  width: 100%;
  height: 1.5rem;
  background: #fff;
  border-bottom: 1px solid #e8e8e8;
  display: flex;
  align-items: center;
  padding: 0 0.3rem;
  box-sizing: border-box;
}
.ver_content > span {
  font-size: 0.35rem;
  margin-right: 0.2rem;
}
.ver_content input {
  width: 55%;
  height: 70%;
  padding: 0 0.2rem;
  border: none;
  outline: none;
}
.obtain {
  width: 2.2rem;
  height: 0.8rem;
  border-radius: 10px;
  background: #eee;
  color: #9d9d9d;
  text-align: center;
  line-height: 0.8rem;
  font-size: 0.35rem;
  letter-spacing: 1px;
}
.obtain2 {
  width: 2.2rem;
  height: 0.8rem;
  background: #fff;
  color: #b3262c;
  text-align: center;
  line-height: 0.8rem;
  font-size: 0.35rem;
  letter-spacing: 1px;
  border: 2px solid #b3262c;
  border-radius: 10px;
}
.bott_log {
  background-color: #eee;
  width: 670px;
  height: 115px;
  margin: 0 auto;
}
.bott_log2 {
  background-color: #b3262c;
  width: 670px;
  height: 115px;
  margin: 0 auto;
}
</style>
